<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>中美两国与国际原油价格走势对比</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
$.getJSON('/assets/data/oil-price.json', function(data) {
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
    padding: [20, 110, 70, 35]
  });
  chart.source(data);
  chart.scale('date', {
    range: [0, 1],
    tickCount: 10,
    type: 'timeCat'
  });
  chart.axis('date', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      }
    }
  });
  chart.axis('price', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      }
    }
  });
  chart.tooltip({
    crosshairs: 'y',
    share: true
  });
  chart.legend({
    attachLast: true
  });
  chart.line().position('date*price').shape('hv').color('country');

  chart.render();
});
</script>
</body>
</html>
